<template>
	<view class="card">
		<!--          <div class="liveCardheader u-flex u-row-between">
               <view class="u-flex u-col-center">
                	
                    <div>
                        <h3 class="title u-flex u-col-center">{{info.shop_name}} <u-tag text="热门" mode="plain" size="mini" shape="circle" type="warning"  class="u-m-l-10"/></h3>

                        <p  class="tipsColor">
                          <span class="u-m-r-20">{{info.title}}</span>
                          {{$u.timeFrom(info.alivetime, 'yyyy-mm')}}</p>
                    </div>
                </view>
       
            </div>
          <div> -->

		</div>
		<div class="cardBody">
			<!-- <p class="notice" v-if="info.notice" :style="{color:$u.color['contentColor']}">{{info.notice}}</p> -->
			<div class="coverBox u-flex u-row-between u-rela">
				<div class="left  u-rela" @click="linkTo(info)">
					<!--         <div class="u-flex liverCount" v-if="info.status!==-1">
                                    <liveAnimation />
                                    <span>在线人数:{{info.online_num}}</span>
                                 </div> -->
					<span class="liveBack" v-if="info.transcribe===1">回放</span>
					<!--        <div v-for="(item, index) in appraiseList" :key="index" class="bubble" :class="[item.srcB,item.animaB]" :data-t="item.time">
        </div> -->
					<div class="iconLiveBox" v-if="info.transcribe===1">
						<u-image src="/static/images/praiseIcon/icon-coverLive.png" class="iconLive" width="60"
							height="46" mode="widthFix" border-radius="12"></u-image>
					</div>
					<div class="iconLiveBoxs" v-else>
						<u-image src="/static/bofang.gif" class="iconLive" width="180" mode="widthFix"
							border-radius="12"></u-image>

					</div>

					<u-image :src="info.cover" class="liveCover" width="390px" height="500px" mode="scaleToFill"
						border-radius="12"></u-image>
					<!-- <u-image src="/static/images/praiseIcon/icon-appraise.png" class="appraiseIcon" width="40" height="40" mode="widthFix" ></u-image> -->
<!-- 					<view class="bottom_info">
						<view class="bottom_left">
							<avatar :img="info.shop_logo" :size="20"></avatar>
							<view>{{info.shop_name}}</view>
						</view>
						<view class="bottom_right">
							{{info.online_num}}
						</view>
					</view> -->
				</div>
				<!--    <div class="right ">
                <block v-for="(item,index) in 2" :key="index">
                        <u-image :src="info.goods.thumb_url" width="260" height="216" mode="widthFix" border-radius="12"> </u-image>
                </block>
            </div> -->
			</div>
		</div>
	</view>
</template>
<script>
	import liveAnimation from "@/components/liveAnimation"
	import avatar from './avatar.vue'

	export default {
		data() {
			return {
				appraiseList: [],
				appraiseNum: Math.floor(Math.random() * 100),
				userInfo: {}
			}
		},
		components: {
			liveAnimation,
			avatar
		},
		props: {
			info: {},
			indexw: Number
		},
		// props: [
		// 	'info',
		// 	'indexw'
		// ],

		onShow() {
			uni.getStorage({
				key: 'userInfo',
				success: res => {
					console.log(res.data, "用户信息")
					this.userInfo = JSON.parse(res.data)
				}
			});
		},
		mounted() {
			uni.getStorage({
				key: 'userInfo',
				success: res => {
					console.log(res.data, "用户信息")
					this.userInfo = JSON.parse(res.data)
				}
			});

			//        let interTimer =    setInterval(() => {
			//         this.praiseAction()
			//     }, 300)
			//      this.$once('hook:beforeDestroy', () => {
			//             clearInterval(interTimer)
			// })
		},
		methods: {
			praiseAction() {

				const randomA = Math.floor(Math.random() * 6) + 1;
				const randomB = Math.floor(Math.random() * 11) + 1; // bl1~bl11
				const time = new Date().getTime()

				const srcB = `b${randomA}`;
				const animaB = `bl${randomB}`;
				let data = {
					srcB,
					animaB,
					time
				}

				this.appraiseList.push(data)
				if (this.appraiseList.length > 30) {
					this.appraiseList.splice(0, this.appraiseList.length - 1)
				}
				this.appraiseNum += 1
			},
			linkTo(item) {
				console.log(this.indexw)
				if (this.userInfo.id) {
					// uni.showModal({
					//     title: '提示',
					//     content: '请先登录',
					//     success: function (res) {
					//         if (res.confirm) {
					//             console.log('用户点击确定');
					// 		 uni.navigateTo({
					// 		 	 url:'/pagesB/login/login'
					// 		 })
					//         } else if (res.cancel) {
					//             console.log('用户点击取消');
					//         }
					//     }
					// });
					//  return 
				}
				const params = {
					shop_id: item.shop_id,
					index: this.indexw
				}
				// #ifdef APP-PLUS
				this.$u.route({
					url: '/pages/live/Audience',
					params
				})
				// #endif
				// #ifdef  MP-WEIXIN || H5
				this.$u.route({
					url: '/platforms/live-player',
					params
				})
				// #endif
			},
		}
	}
</script>
<style lang="scss" scoped>
	@import '~uview-ui/index.scss';

	.card {
		background-color: #fff;
		margin: 15upx 0;
		border-radius: 12upx;
		overflow: hidden;
		margin-top: 30upx;
		// padding: 15upx;
		margin-left: 0upx;
		.bottom_info {
			display: flex;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 0 12rpx;
			align-items: center;
			justify-content: space-between;
			border-radius: 0rpx 0rpx 5rpx 5rpx;
			height: 55rpx;
			background-color: rgba($color: #000000, $alpha: 0.3);
			color: #fff;

			/deep/.u-avatar__img {
				width: 40rpx;
				height: 40rpx;
			}

			.bottom_left {
				display: flex;
				align-items: center;
			}
		}
	}

	.liveCardheader {
		margin-bottom: 15upx;

		.title {
			font-size: 32upx;
			font-weight: 600;
		}

		.tipsColor {
			color: #999;
			font-size: 24upx;
		}

	}

	.liverCount {
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 100px;
		display: inline-flex;
		position: absolute;
		bottom: 30upx;
		left: 20upx;
		z-index: 1;
		color: #fff;
		height: 30upx;
		padding-right: 10upx;
		font-size: 24upx;

	}

	.coverBox {
		.right {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			height: 440upx;
		}

		.left {
			.appraiseIcon {
				position: absolute;
				bottom: 30upx;
				right: 30upx;
			}

			.iconLiveBox {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				animation: rotate360 5s ease-in-out 0.5s;
				transition: all 2s;
				background-color: rgba($color: #000000, $alpha: 0.3);
				border: 3upx solid rgba($color: #fff, $alpha: 0.8);
				z-index: 1;
				border-radius: 200px;
				padding: 10upx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 90upx;
				height: 90upx;
			}

			.iconLiveBoxs {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				animation: rotate360 5s ease-in-out 0.5s;
				transition: all 2s;
				// background-color: rgba($color: #000000, $alpha: 0.3);
				// border:3upx solid rgba($color: #fff, $alpha: 0.8);
				z-index: 1;
				// border-radius:200px;
				// padding: 10upx;
				// display: flex;
				// justify-content: center;
				// align-items: center;
				// width:90upx;
				// height: 90upx;
			}
		}
	}

	.notice {
		margin: 20upx 0
	}

	@keyframes rotate360 {
		0% {

			transform: translate(-50%, -50%) rotateY(0);
		}

		50% {
			transform: translate(-50%, -50%) rotateY(360deg);
		}

		100% {
			transform: translate(-50%, -50%) rotateY(0);
		}
	}

	.liveBack {
		background-color: rgba(0, 0, 0, 0.6);
		top: 10upx;
		right: 10upx;
		position: absolute;
		font-size: 24upx;
		color: #fff;
		border-radius: 100px;
		display: inline-block;
		padding: 0 14upx;
		line-height: 1.4;
		z-index: 10;
	}

	//点赞动画

	$bubble_time:3s;
	$bubble_scale:0.8s;



	.bubble {
		position: absolute;
		width: 40upx;
		height: 40upx;
		left: 340upx;
		bottom: 60upx;
		background-repeat: no-repeat;
		background-size: 100%;
		transform-origin: bottom;
		z-index: 1
	}

	.b1 {
		background-image: url('@/static/images/praiseIcon/bg1.png');
		// 可以使用雪碧图
		// background-position: -42px -107px;
		// background-size: 188.5px 147px;
	}

	.b2 {
		background-image: url('@/static/images/praiseIcon/bg2.png');
		// background-position: -84px -107px;
		// background-size: 188.5px 147px;
	}

	.b3 {
		background-image: url('@/static/images/praiseIcon/bg3.png');
		// background-position: 0 -107px;
		// background-size: 188.5px 147px;
	}

	.b4 {
		background-image: url('@/static/images/praiseIcon/bg4.png');
		// background-position: -45px -62px;
		// background-size: 188.5px 147px;
	}

	.b5 {
		background-image: url('@/static/images/praiseIcon/bg5.png');
		// background-position: -107px -42px;
		// background-size: 188.5px 147px;
	}

	.b6 {
		background-image: url('@/static/images/praiseIcon/bg6.png');
		// background-position: -107px 0;
		// background-size: 188.5px 147px;
	}

	.bl1 {
		animation: bubble_1 $bubble_time linear 1 forwards,
			bubble_big_1 $bubble_scale linear 1 forwards,
			bubble_y $bubble_time linear 1 forwards;
	}

	.bl2 {
		animation: bubble_2 $bubble_time linear 1 forwards,
			bubble_big_2 $bubble_scale linear 1 forwards,
			bubble_y $bubble_time linear 1 forwards;
	}

	.bl3 {
		animation: bubble_3 $bubble_time linear 1 forwards,
			bubble_big_1 $bubble_scale linear 1 forwards,
			bubble_y $bubble_time linear 1 forwards;
	}

	.bl4 {
		animation: bubble_4 $bubble_time linear 1 forwards,
			bubble_big_2 $bubble_scale linear 1 forwards,
			bubble_y $bubble_time linear 1 forwards;
	}

	.bl5 {
		animation: bubble_5 $bubble_time linear 1 forwards,
			bubble_big_1 $bubble_scale linear 1 forwards,
			bubble_y $bubble_time linear 1 forwards;
	}

	.bl6 {
		animation: bubble_6 $bubble_time linear 1 forwards,
			bubble_big_3 $bubble_scale linear 1 forwards,
			bubble_y $bubble_time linear 1 forwards;
	}

	.bl7 {
		animation: bubble_7 $bubble_time linear 1 forwards,
			bubble_big_1 $bubble_scale linear 1 forwards,
			bubble_y $bubble_time linear 1 forwards;
	}

	.bl8 {
		animation: bubble_8 $bubble_time linear 1 forwards,
			bubble_big_3 $bubble_scale linear 1 forwards,
			bubble_y $bubble_time linear 1 forwards;
	}

	.bl9 {
		animation: bubble_9 $bubble_time linear 1 forwards,
			bubble_big_2 $bubble_scale linear 1 forwards,
			bubble_y $bubble_time linear 1 forwards;
	}

	.bl10 {
		animation: bubble_10 $bubble_time linear 1 forwards,
			bubble_big_1 $bubble_scale linear 1 forwards,
			bubble_y $bubble_time linear 1 forwards;
	}

	.bl11 {
		animation: bubble_11 $bubble_time linear 1 forwards,
			bubble_big_2 $bubble_scale linear 1 forwards,
			bubble_y $bubble_time linear 1 forwards;
	}

	@keyframes bubble_11 {
		0% {}

		25% {
			margin-left: -10px;
		}

		50% {
			margin-left: -10px;
		}

		100% {
			margin-left: -18px;
		}
	}

	@keyframes bubble_10 {
		0% {}

		25% {
			margin-left: -20px;
		}

		50% {
			margin-left: -20px;
		}

		100% {
			margin-left: -20px;
		}
	}

	@keyframes bubble_9 {
		0% {}

		25% {
			margin-left: 10px;
		}

		50% {
			margin-left: 10px;
		}

		100% {
			margin-left: 10px;
		}
	}

	@keyframes bubble_8 {
		0% {}

		25% {
			margin-left: 20px;
		}

		50% {
			margin-left: 20px;
		}

		100% {
			margin-left: 20px;
		}
	}

	@keyframes bubble_7 {
		0% {}

		25% {
			margin-left: 3px;
		}

		50% {
			margin-left: 1px;
		}

		75% {
			margin-left: 2px;
		}

		100% {
			margin-left: 3px;
		}
	}

	@keyframes bubble_6 {
		0% {}

		25% {
			margin-left: -3px;
		}

		50% {
			margin-left: -1px;
		}

		75% {
			margin-left: -2px;
		}

		100% {
			margin-left: -3px;
		}
	}

	@keyframes bubble_5 {
		0% {}

		25% {
			margin-left: 5px;
		}

		50% {
			margin-left: -5px;
		}

		75% {
			margin-left: -10px;
		}

		100% {
			margin-left: -20px;
		}
	}

	@keyframes bubble_4 {
		0% {}

		25% {
			margin-left: -5px;
		}

		50% {
			margin-left: -5px;
		}

		75% {
			margin-left: 20px;
		}

		100% {
			margin-left: 10px;
		}
	}

	@keyframes bubble_3 {
		0% {}

		25% {
			margin-left: -20px;
		}

		50% {
			margin-left: 10px;
		}

		75% {
			margin-left: 20px;
		}

		100% {
			margin-left: -10px;
		}
	}

	@keyframes bubble_2 {
		0% {}

		25% {
			margin-left: 20px;
		}

		50% {
			margin-left: 25px;
		}

		75% {
			margin-left: 10px;
		}

		100% {
			margin-left: 5px;
		}
	}

	@keyframes bubble_1 {
		0% {}

		25% {
			margin-left: -8px;
		}

		50% {
			margin-left: 8px;
		}

		75% {
			margin-left: -15px;
		}

		100% {
			margin-left: 15px;
		}
	}

	@keyframes bubble_big_1 {
		0% {
			transform: scale(0.3);
		}

		100% {
			transform: scale(1.2);
		}
	}

	@keyframes bubble_big_2 {
		0% {
			transform: scale(0.3);
		}

		100% {
			transform: scale(0.9);
		}
	}

	@keyframes bubble_big_3 {
		0% {
			transform: scale(0.3);
		}

		100% {
			transform: scale(0.6);
		}
	}

	@keyframes bubble_y {
		0% {
			margin-bottom: 0;
		}

		10% {
			margin-bottom: 0;
		}

		75% {
			opacity: 1;
		}

		100% {
			margin-bottom: 200px;
			opacity: 0;
		}
	}
</style>
